<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix ListWithSearch</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="../define/ListWithSearch.js"></script>
  </head>

  <body role="main">
    <div class="demo medium padded">
      <elix-list-with-search
        aria-label="Fruits"
        placeholder="Search for fruit"
        style="height: 100%;"
      >
        <div>Acai</div>
        <div>Akee</div>
        <div>Apple</div>
        <div>Apricot</div>
        <div>Avocado</div>
        <div>Banana</div>
        <div>Bilberry</div>
        <div>Black sapote</div>
        <div>Blackberry</div>
        <div>Blackcurrant</div>
        <div>Blood orange</div>
        <div>Blueberry</div>
        <div>Boysenberry</div>
        <div>Cantaloupe</div>
        <div>Cherimoya</div>
        <div>Cherry</div>
        <div>Chico fruit</div>
        <div>Clementine</div>
        <div>Cloudberry</div>
        <div>Coconut</div>
        <div>Crab apple</div>
        <div>Cranberry</div>
        <div>Cucumber</div>
        <div>Currant</div>
        <div>Damson</div>
        <div>Date</div>
        <div>Dragonfruit</div>
        <div>Durian</div>
        <div>Elderberry</div>
        <div>Feijoa</div>
        <div>Fig</div>
        <div>Goji berry</div>
        <div>Gooseberry</div>
        <div>Grape</div>
        <div>Grapefruit</div>
        <div>Guava</div>
        <div>Honeyberry</div>
        <div>Honeydew</div>
        <div>Horned melon</div>
        <div>Huckleberry</div>
        <div>Jabuticaba</div>
        <div>Jackfruit</div>
        <div>Jambul</div>
        <div>Japanese plum</div>
        <div>Jostaberry</div>
        <div>Jujube</div>
        <div>Juniper berry</div>
        <div>Kiwifruit</div>
        <div>Kumquat</div>
        <div>Lemon</div>
        <div>Lime</div>
        <div>Longan</div>
        <div>Loquat</div>
        <div>Lychee</div>
        <div>Mandarin</div>
        <div>Mango</div>
        <div>Mangosteen</div>
        <div>Marionberry</div>
        <div>Miracle fruit</div>
        <div>Mulberry</div>
        <div>Nance</div>
        <div>Nectarine</div>
        <div>Orange</div>
        <div>Papaya</div>
        <div>Passionfruit</div>
        <div>Peach</div>
        <div>Pear</div>
        <div>Persimmon</div>
        <div>Pineapple</div>
        <div>Pineberry</div>
        <div>Plantain</div>
        <div>Plum</div>
        <div>Pluot</div>
        <div>Pomegranate</div>
        <div>Pomelo</div>
        <div>Purple mangosteen</div>
        <div>Quince</div>
        <div>Rambutan</div>
        <div>Raspberry</div>
        <div>Redcurrant</div>
        <div>Salak</div>
        <div>Salal berry</div>
        <div>Salmonberry</div>
        <div>Satsuma</div>
        <div>Soursop</div>
        <div>Star apple</div>
        <div>Star fruit</div>
        <div>Strawberry</div>
        <div>Surinam cherry</div>
        <div>Tamarillo</div>
        <div>Tamarind</div>
        <div>Tangerine</div>
        <div>Ugli fruit</div>
        <div>Watermelon</div>
        <div>White currant</div>
        <div>White sapote</div>
        <div>Yuzu</div>
      </elix-list-with-search>
    </div>
  </body>
</html>
